blob: f84ebe5259db972a86c932b6800caf5981ff3c0d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
// app/procurement/dashboard/page.tsx
import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Shell } from "@/components/shell";
import { ErrorBoundary } from "@/components/error-boundary";
import { getDashboardData, refreshDashboardData } from "@/lib/dashboard/service";
import { DashboardClient } from "@/lib/dashboard/dashboard-client";
export const dynamic = 'force-dynamic'; // ① 동적 페이지 선언
// 대시보드 데이터 로딩 컴포넌트
async function DashboardContent() {
try {
const data = await getDashboardData("evcp");
return (
<DashboardClient
initialData={data}
onRefresh={refreshDashboardData}
/>
);
} catch (error) {
console.error("Dashboard data loading error:", error);
throw error;
}
}
// 대시보드 로딩 스켈레톤
function DashboardSkeleton() {
return (
<div className="space-y-6">
{/* 헤더 스켈레톤 */}
<div className="flex items-center justify-between">
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-72" />
</div>
<Skeleton className="h-10 w-24" />
</div>
{/* 요약 카드 스켈레톤 */}
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{[...Array(4)].map((_, i) => (
<div key={i} className="space-y-3 p-6 border rounded-lg">
<div className="flex items-center justify-between">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-4 w-4" />
</div>
<Skeleton className="h-8 w-12" />
<Skeleton className="h-3 w-20" />
</div>
))}
</div>
{/* 차트 스켈레톤 */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{[...Array(2)].map((_, i) => (
<div key={i} className="space-y-4 p-6 border rounded-lg">
<div className="space-y-2">
<Skeleton className="h-6 w-32" />
<Skeleton className="h-4 w-48" />
</div>
<Skeleton className="h-[300px] w-full" />
</div>
))}
</div>
{/* 탭 스켈레톤 */}
<div className="space-y-4">
<Skeleton className="h-10 w-64" />
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{[...Array(6)].map((_, i) => (
<div key={i} className="space-y-4 p-6 border rounded-lg">
<Skeleton className="h-6 w-32" />
<div className="space-y-3">
<div className="flex justify-between">
<Skeleton className="h-4 w-16" />
<Skeleton className="h-4 w-12" />
</div>
<div className="flex gap-2">
<Skeleton className="h-6 w-16" />
<Skeleton className="h-6 w-16" />
<Skeleton className="h-6 w-16" />
</div>
<Skeleton className="h-2 w-full" />
</div>
</div>
))}
</div>
</div>
</div>
);
}
// 에러 표시 컴포넌트
function DashboardError({ error, reset }: { error: Error; reset: () => void }) {
return (
<div className="flex flex-col items-center justify-center py-12 space-y-4">
<div className="text-center space-y-2">
<h3 className="text-lg font-semibold">대시보드를 불러올 수 없습니다</h3>
<p className="text-muted-foreground">
{error.message || "알 수 없는 오류가 발생했습니다."}
</p>
</div>
<button
onClick={reset}
className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
>
다시 시도
</button>
</div>
);
}
export default async function DashboardPage() {
return (
<Shell className="gap-6">
<ErrorBoundary fallback={DashboardError}>
<React.Suspense fallback={<DashboardSkeleton />}>
<DashboardContent />
</React.Suspense>
</ErrorBoundary>
</Shell>
);
}
|
